<template>
  <div>
    <Row :gutter="20">
      <i-col :span="6" v-for="(infor, i) in inforCardData" v-if="!infor.hidden" :key="`infor-${i}`" style="height: 120px;" :style="i>3?'margin-top:10px;':''">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style" />
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>

    <!-- <Row :gutter="20" style="margin-top: 20px;">
      <i-col span="8">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pieData" text="用户访问来源"></chart-pie>
        </Card>
      </i-col>
      <i-col span="16">
        <Card shadow>
          <chart-bar style="height: 300px;" :value="barData" text="每周用户活跃量"/>
        </Card>
      </i-col>
    </Row> -->
    <Row style="margin-top: 20px;background-color:#fff">
      <i-col span="5">
        <div class="data-item" :class="{'current-data-num':currentIndex==0}" @click="currentIndex=0;switchChartType()">
          <div class="data-num">
            {{newUserNumOfToday}}
          </div>
          <div class="data-tip">
            新增用户（今日）
          </div>
        </div>
        <div class="data-item" :class="{'current-data-num':currentIndex==1}" @click="currentIndex=1;switchChartType()">
          <div class="data-num">
            {{startedNumOfToday}}
          </div>
          <div class="data-tip">
          启动次数（今日）
          </div>
        </div>
      </i-col>
      <i-col span="19">
        <Card shadow>
          <example ref="ex1" style="height: 400px;" />
        </Card>
      </i-col>

    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
import { desktopData } from '@/api/baseinfo'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  methods: {
    switchChartType () {
      this.$refs.ex1.switchDataType(this.currentIndex)
    }
  },
  data () {
    return {
      currentIndex: 0,
      newUserNumOfToday: 0,
      startedNumOfToday: 0,
      inforCardData: [
        {
          title: '累计用户',
          icon: 'md-person-add',
          count: 0,
          color: '#2d8cf0'
        },
        {
          title: '近7日总活跃用户数',
          icon: 'md-locate',
          count: 0,
          color: '#19be6b'
        },
        {
          title: '近7日平均新增用户',
          icon: 'md-help-circle',
          count: 0,
          color: '#ff9900'
        },
        {
          title: '近7日平均总活跃用户数',
          icon: 'md-share',
          count: 0,
          color: '#ed3f14'
        },
        {
          title: '近7日平均次日留存率(%)',
          icon: 'md-chatbubbles',
          count: 0,
          hidden: true,
          color: '#E46CBB'
        },
        {
          title: '近30日总活跃用户数',
          icon: 'md-map',
          count: 0,
          color: '#9A66E4'
        },
        {
          title: '近7日平均使用时长',
          icon: 'md-map',
          hidden: true,
          count: 0,
          color: '#9A66E4'
        }
      ]
    }
  },
  created () {
    desktopData().then(data => {
      this.inforCardData[0].count = data.totalUserNum
      this.inforCardData[1].count = data.activeUserNumOf7Days
      this.inforCardData[2].count = data.newUserNumOf7Days
      // 近7日平均总活跃用户数
      this.inforCardData[3].count = data.activeUserNumPerDay
      // 近7日平均次日留存率
      this.inforCardData[4].count = data.remainPercentOf7Days
      // 近30日总活跃用户数
      this.inforCardData[5].count = data.activeUserNumOf30Days
      // 近7日平均使用时长
      this.inforCardData[6].count = data.useTimeOf7days
      // 新增用户（今日）
      this.startedNumOfToday = data.startedCountOfToday
      this.newUserNumOfToday = data.newUserNumOfToday
    })
  },
  mounted () {
    //
  }
}
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
.data-item {
  text-align: left;
  font-size: 20px;
  padding-left: 30px;
  border: 1px solid #e6e6e6;
  border-bottom: none;
  cursor: pointer;
  padding-top: 10px;
  padding-bottom: 20px;
  .data-num {
    padding: 10px 0;
  }
  .data-tip {
    color: #999;
    font-size: 14px;
  }
}
.current-data-num {
  background: #2d8cf0;
  color: white;
  border-color: #2d8cf0;
  .data-tip {
    color: #fff;
  }
}
.data-item:last-child {
  border-bottom: 1px solid #e6e6e6;
}
.data-item:first-child {
  border-top: none;
}
</style>
